<template>
  <view>
    <view class="goods-item">
      <!-- 左边图片 -->
      <view class="left-image">
        <radio :checked="goods.goods_state" color="#c00000" v-if="showRadio" @click="radioClickHandler"></radio>
        <image :src="goods.goods_small_logo || defaultPic"></image>
      </view>
      <!-- 右边信息 -->
      <view class="right-info">
        <view class="goods_name">{{ goods.goods_name }}</view>
        <view class="goods-info-box">
          <view class="goods_price"> ￥{{ goods.goods_price | tofixed}}</view>
          <uni-number-box :min="1" :value="goods.goods_count" v-if="showNum" @change="numChangeHandler"></uni-number-box>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name:"my-goods",
    props: {
      // 自定义组件要渲染的数据
      goods: {
        type: Object,
        default: () => {}
      },
      // 商品选中状态
      showRadio: {
        type: Boolean,
        default: false
      },
      // 是否显示商品数量
      showNum: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        // 空图片
        defaultPic: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png'
      };
    },
    
    // 过滤器
    filters: {
      // 处理价格
      tofixed (num) {
        return Number(num).toFixed(2)
      }
    },
    
    methods: {
      // 商品选中和未选中点击事件
      radioClickHandler () {
        // 通知父组件
        this.$emit('radio-change', { goods_id: this.goods.goods_id, goods_state: !this.goods.goods_state })
      },
      
      // 数量变化事件处理函数
      numChangeHandler (value) {
        // 通知父组件执行注册的函数
        this.$emit('num-change', { goods_id: this.goods.goods_id, goods_count: value })
      }
    }
  }
</script>

<style lang="scss">
 .goods-item {
    border-bottom: 1px solid #efefef;
    padding: 8rpx;
    display: flex;

    .left-image {
      display: flex;
      justify-content: space-between;
      align-items: center;
      image {
        width: 200rpx;
        height: 200rpx;
        vertical-align: middle;
      }
    }

    .right-info {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .goods_name {
        font-size: 24rpx;
      }
      .goods-info-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .goods_price {
          font-size: 32rpx;
          color: #c00000;
        }
      }
    
    }
  }
</style>
